.foxui-carousel-wrapper {
    display: flex;
}

.foxui-carousel-slide {
    width: 100%;
    flex-shrink: 0;
    overflow: hidden;
}

.foxui-carousel-pagination {
    position: absolute;
    right: 0;
    left: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    margin-left: $--carousel-pagination-margin-left;
    margin-right: $--carousel-pagination-margin-right;
    bottom: $--carousel-pagination-bottom;

    // 圆形
    &.is-dots {
        .foxui-pagination-indicator {
            width: $--carousel-indicator-dots-width;
            height: $--carousel-indicator-dots-height;
            border-radius: 100%;
        }
    }
}

// 长方形(默认)
.foxui-pagination-indicator {
    position: relative;
    display: inline-block;
    flex: 0 1 auto;
    box-sizing: content-box;
    width: $--carousel-indicator-square-width;
    height: $--carousel-indicator-square-height;
    margin: 0 3px;
    padding: 0;
    text-align: center;
    transition: all 0.5s;
    background: #fff;
    opacity: 0.3;
    border-radius: 1px;
    cursor: pointer;

    &:hover {
        opacity: 0.75;
    }

    &.is-active {
        width: $--carousel-indicator-square-width-active;
        opacity: 1;
    }
}

.foxui-carousel-button-prev,
.foxui-carousel-button-next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: $--carousel-button-width;
    height: $--carousel-button-height;
    border-radius: 50%;
    transition: 0.3s;
    color: #fff;
    background-color: rgba(#1c2c3c, 0.1);
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;

    &:hover {
        background-color: rgba(#1c2c3c, 0.2);
    }
}

.foxui-carousel-button-prev {
    left: 12px;

    &::after {
        content: '\e8b1';
        font-family: 'foxuifont';
    }
}

.foxui-carousel-button-next {
    right: 12px;

    &::after {
        content: '\e8b4';
        font-family: 'foxuifont';
    }
}

.foxui-carousel {
    position: relative;
    overflow: hidden;

    // 纵向排列
    &.foxui-type-vertical {
        height: 100%;

        .foxui-carousel-wrapper {
            flex-direction: column;
            height: 100%;
        }

        .foxui-carousel-pagination {
            height: 100%;
            right: 12px;
            left: auto;
            top: 0;
            align-items: center;
            margin-left: 0;
            margin-right: 0;
            flex-direction: column;

            &:not(.is-dots) {
                .foxui-pagination-indicator {
                    width: $--carousel-indicator-square-height;
                    height: $--carousel-indicator-square-width;

                    &.is-active {
                        height: $--carousel-indicator-square-width-active;
                    }
                }
            }
        }

        .foxui-pagination-indicator {
            margin: 3px 0;
        }

        .foxui-carousel-slide {
            width: auto;
            height: 100%;
        }
    }
}
